<script setup>
// 获取屏幕边界到安全区域距离
import { ref, defineEmits } from 'vue'
import { useUserStore } from '@/stores'

const { safeAreaInsets } = uni.getSystemInfoSync()
const userStore = useUserStore()
</script>

<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px', height: '170rpx' }">
    <!-- logo文字 -->
    <view class="logo">
      <span
        style="
          font-size: large;
          margin-left: 20rpx;
          color: white;
          font-weight: bolder;
          font-family: Georgia;
          letter-spacing: 5rpx;
        "
        >果蔬之眼</span
      >
    </view>
    <view class="search-countainer">
      <!-- 情况1：已登录 -->
      <view class="overview" v-if="userStore.isLogin()">
        <navigator url="/pages/mine/mine" hover-class="none">
          <uv-avatar class="avatar" mode="aspectFill" :src="userStore.user.avatarUrl"></uv-avatar>
        </navigator>
      </view>
      <!-- 情况2：未登录 -->
      <view class="overview" v-else>
        <navigator url="/pages/login/login" hover-class="none">
          <uv-avatar
            class="avatar gray"
            mode="aspectFill"
            src="https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/default_avater.png"
          ></uv-avatar>
        </navigator>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/background1.png);
  // background-color: #45d675;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 15rpx;
    padding-top: 20rpx;
    .logo-image {
      width: 220rpx;
      height: 70rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search-countainer {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右对齐 */
  }
}
</style>
